<style scoped>
</style>
<template>
  <div>
    <ul>
      <li>
        <label for="">选择数量</label>
        <select name="" v-model="num" id="">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
        </select>
      </li>
      <li class="boxs group" v-for="item in 7" v-if="param.banner[item-1].enabled">
        <div class="cell-bl-1">
          <upload></upload>
        </div>
        <div class="cell-bl-4">
          <p><label for="">标题</label><input v-model="param.banner[item-1].title" type="text"></p>
          <p><label for="">外链</label><input v-model="param.banner[item-1].url" type="text"></p>
        </div>
      </li>
    </ul>
    <p class="text-center editor-foot">
      <button class="btn" @click="save">保存</button>
      <button class="btn" @click="close">取消</button>
    </p>
  </div>
</template>

<script>

import mixin from './mixin'
export default {
  mixins:[mixin],
  data() {
    return {
      num:1,
      param:{banner:[
        {img:'',url:'',title:'',enabled:true},
        {img:'',url:'',title:'',enabled:false},
        {img:'',url:'',title:'',enabled:false},
        {img:'',url:'',title:'',enabled:false},
        {img:'',url:'',title:'',enabled:false},
        {img:'',url:'',title:'',enabled:false},
        {img:'',url:'',title:'',enabled:false}
      ],type:8}
    };
  },
  watch: {
    num () {
      let vm = this
      this.param.banner = this.param.banner.map(function(data,index){
        if(index < vm.num){
          data.enabled = true
        }else{
          data.enbaled = false
        }
        return data
      })
    }
  },
  mounted () {
    this.param.banner = this.data.banner
    this.param.num = this.data.num
  },
  methods: {
  }
}
</script>
